<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>登录页</title>
	<!-- 引入 Element UI 样式 -->
	<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	<!-- 引入 Vue 核心库 -->
	<script src="js/vue.js"></script>
	<!-- 引入 Axios 用于 HTTP 请求 -->
	<script src="js/axios-0.18.0.js"></script>
	<!-- 引入 Element UI 组件库 -->
	<script src="element-ui/lib/index.js"></script>
	<!-- 引入全局配置（需确保 server_url 已定义） -->
	<script src="js/server.js"></script>

	<style>
		/* 登录表单容器样式 */
		.login-form {
			width: 450px;
			height: 220px;
			border: 1px solid #DCDFE6;
			border-radius: 5px;
			box-shadow: 0 0 25px #909399;
			margin: 150px auto;
			padding: 35px 35px 15px 35px;
		}

		/* 登录标题样式 */
		.login-title {
			text-align: center;
			margin: 0 auto 10px auto;
			color: #303133;
		}
	</style>
</head>
<body>
<!-- Vue 挂载容器 -->
<div id="app">
	<!-- Element UI 表单组件 -->
	<el-form
			:model="loginForm"
			:rules="rules"
			ref="loginForm"
			label-width="100px"
			class="login-form"
	>
		<!-- 系统标题 -->
		<h3 class="login-title">超市账单管理系统</h3>

		<!-- 账号输入框 -->
		<el-form-item label="账号" prop="userCode">
			<el-input
					v-model="loginForm.userCode"
					placeholder="请输入登录账号"
			></el-input>
		</el-form-item>

		<!-- 密码输入框 -->
		<el-form-item label="密码" prop="password">
			<el-input
					type="password"
					v-model="loginForm.password"
					placeholder="请输入登录密码"
			></el-input>
		</el-form-item>

		<!-- 操作按钮组 -->
		<el-form-item>
			<!-- 登录按钮 -->
			<el-button
					type="primary"
					@click="handleLogin"
			>
				登录
			</el-button>

			<!-- 重置按钮 -->
			<el-button @click="resetForm">
				重置
			</el-button>
		</el-form-item>
	</el-form>
</div>

<script>
	// 创建 Vue 实例
	new Vue({
		el: "#app",  // 挂载到页面的 #app 元素
		data() {
			return {
				// 表单数据对象
				loginForm: {
					userCode: "",   // 账号字段（双向绑定）
					password: ""    // 密码字段（双向绑定）
				},
				// 表单校验规则
				rules: {
					// 账号校验规则
					userCode: [
						{
							required: true,        // 是否必填
							message: '请输入登录账号', // 校验不通过提示
							trigger: 'blur'        // 失去焦点时触发校验
						}
					],
					// 密码校验规则
					password: [
						{
							required: true,        // 是否必填
							message: '请输入登录密码', // 校验不通过提示
							trigger: 'blur'        // 失去焦点时触发校验
						}
					]
				}
			}
		},
		methods: {
			// 登录处理函数
			handleLogin() {
				// 触发表单校验
				this.$refs.loginForm.validate((valid) => {
					// valid 为 true 表示校验通过
					if (valid) {
						// 构建 URL 编码的请求参数
						const params = new URLSearchParams();
						params.append('userCode', this.loginForm.userCode);   // 拼接账号参数
						params.append('userPassword', this.loginForm.password); // 拼接密码参数（注意后端字段名）

						// 发起登录请求
						axios.post(
								server_url + "/api/user/login",  // 后端登录接口地址（需确保 server_url 已配置）
								params,  // 请求体参数（URL 编码格式）
								{
									headers: {
										// 指定请求体格式（必须与后端 @RequestParam 匹配）
										'Content-Type': 'application/x-www-form-urlencoded'
									}
								}
						).then((resp) => {
							// 打印完整响应（调试用）
							console.log("后端完整响应：", resp.data);

							// 校验后端返回的业务状态码
							if (resp.data.code === 0) {
								// 登录成功逻辑：
								// 1. 存储用户信息到本地存储（持久化）
								localStorage.setItem(
										"loginUser",
										JSON.stringify(resp.data.data.user)  // 存储完整用户对象
								);

								// 2. 可选：存储 Token（如果后端返回了 Token）
								// localStorage.setItem("token", resp.data.data.token);

								// 3. 跳转到系统主页
								this.$message.success("登录成功");
								window.location.href = "index.html";
							} else {
								// 登录失败：提示后端返回的错误信息
								this.$message.error(resp.data.msg);
							}
						}).catch((err) => {
							// 请求异常处理（网络错误等）
							console.error("登录请求失败：", err);
							this.$message.error("网络异常，请稍后重试");
						});
					} else {
						// 表单校验不通过：提示用户完善信息
						this.$message.warning("请填写完整登录信息");
					}
				});
			},

			// 表单重置函数
			resetForm() {
				// 重置表单数据和校验状态
				this.$refs.loginForm.resetFields();
			}
		}
	});
</script>
</body>
</html>
